<!-- 我是排序筛选功能 -->
<script setup>
import { ref } from "vue";

let emit = defineEmits(['sortMethod'])
// 控制销量升序三角样式
const xiaoliang_sheng = ref("");
// 控制销量降序三角样式
const xiaoliang_jiang = ref("");
// 控制价格升序三角样式
const jiage_sheng = ref("");
// 控制价格降序三角样式
const jiage_jiang = ref("");

let num = 0
let xl = () => {
  jiage_jiang.value = ''
  jiage_sheng.value = ''
  ZHStr.value = ''
if(num % 2 == 0){
  xl_s()
  emit('sortMethod','sold_num,ASC')
}else{
  emit('sortMethod','sold_num,DESC')
  xl_x()
}
num++
}

// 销量升序事件
const xl_s = () => {
  xiaoliang_jiang.value = "";
  xiaoliang_sheng.value = "触发";
  // 下面结合后端写自己的事件
};
//销量降序事件
const xl_x = () => {
  xiaoliang_sheng.value = "";
  xiaoliang_jiang.value = "触发";
  // 下面结合后端写自己的事件
};


let num2 = 0
let jg = () => {
  xiaoliang_jiang.value = "";
  xiaoliang_sheng.value = "";
  ZHStr.value = ''
  if(num2 % 2 == 0){
    emit('sortMethod','price,ASC')
    jg_s()
  }else{
    emit('sortMethod','price,DESC')
    jg_x()
  }
  num2++
}
//价格升序事件
const jg_s = () => {
  jiage_jiang.value = ''
  jiage_sheng.value = '触发'
  // 下面结合后端写自己的事件
}
//价格降序事件
const jg_x = () => {
  jiage_sheng.value = ''
  jiage_jiang.value = '触发'
  // 下面结合后端写自己的事件
}

let ZHStr = ref('触发')
let ZH  = () => {
  emit('sortMethod','')
  ZHStr.value = '触发'
  jiage_jiang.value = ''
  jiage_sheng.value = ''
  xiaoliang_jiang.value = "";
  xiaoliang_sheng.value = "";
}
</script>

<template>
  <view>
    <!-- 外层盒子 -->
    <view class="box">
      <!-- 全部(筛选) -->
      <view class="complete" @click="ZH">
        <view  :class="{
           active_color: ZHStr ? true : '',
          
        }" class="text"> 综合 </view>
        <!-- 倒三角形 -->
       
      </view>

       <!-- 价格(排序) -->
       <view @click="jg" class="sort">
        <view  class="text"> 价格 </view
        ><!-- 三角形 -->
        <view class="operatorBox">
          <!-- 上-->
          <view
            @click="jg_s"
            :class="{
              active_s: jiage_sheng ? true : '',
              shang: jiage_sheng ? '' : true,
            }"
          ></view>
          <!-- 下 -->
          <view
            @click="jg_x"
            :class="{
              active_x: jiage_jiang ? true : '',
              xia: jiage_jiang ? '' : true,
            }"
          ></view>
        </view>
      </view>
      <!-- 销量(排序) -->
      <view    @click="xl" class="sort">
        <view  class="text"> 销量 </view>
        <!-- 三角形 -->
        <view class="operatorBox">
          <!-- 上-->
          <view
         
            :class="{
              active_s: xiaoliang_sheng ? true : '',
              shang: xiaoliang_sheng ? '' : true,
            }"
          ></view>
          <!-- 下 -->
          <view
          
            :class="{
              active_x: xiaoliang_jiang ? true : '',
              xia: xiaoliang_jiang ? '' : true,
            }"
          ></view>
        </view>
      </view>
     
    </view>
  </view>
</template>

<style lang="scss" scoped>
.active_color{
  color: red;
}
// 外层盒子样式
.box {

  border-radius: 5rpx;
  box-shadow: 0 2rpx 4rpx rgba(151, 150, 150, 0.1);
  padding: 20rpx;
  height: 60rpx;
  // 浮动布局
  display: flex;
  justify-content: space-between;
}
// 倒三角形样式
.operator {
  width: 0;
  height: 0;
  border-left: 6rpx solid transparent;
  border-right: 6rpx solid transparent;
  border-top: 8rpx solid #a39e9e;
}
//全部
.complete {
  display: flex;
  align-items: center;
  width: 60rpx;
  justify-content: space-between;
}

//文字样式
.text {
  font-size: 22rpx;
}

// 排序
.sort {
  display: flex;
  align-items: center;
  width: 60rpx;
  justify-content: space-between;
  // 三角形盒子
  .operatorBox {
    display: flex;
    flex-direction: column;
    height: 20rpx;
    justify-content: space-between;
    .shang {
      width: 0;
      height: 0;
      border-left: 6rpx solid transparent;
      border-right: 6rpx solid transparent;
      border-bottom: 8rpx solid #a39e9e;
    }
    .xia {
      width: 0;
      height: 0;
      border-left: 6rpx solid transparent;
      border-right: 6rpx solid transparent;
      border-top: 8rpx solid #a39e9e;
    }
  }
}

//触发样式
.active_s {
  width: 0;
  height: 0;
  border-left: 6rpx solid transparent;
  border-right: 6rpx solid transparent;
  border-bottom: 8rpx solid #ff0000;
}
.active_x {
  width: 0;
  height: 0;
  border-left: 6rpx solid transparent;
  border-right: 6rpx solid transparent;
  border-top: 8rpx solid #ff0000;
}
</style>
